<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>revoke</title>
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/layui.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/css/layui.css}">
</head>
<body>
    <form class="layui-form" onsubmit="return check()" th:action="@{/revoke}" method="post">
        <div class="layui-bg-gray" style="margin: 0 auto">
            <p style="font-size: 30px">您确定要注销账号吗？请输入电话验证身份</p>
        </div>
        <div class="layui-form-item" style="width:300px;margin: 50px auto">
            <label class="layui-form-label" >电话</label>
            <div class="layui-input-block">
                <input type="text" style="width: 200px" maxlength="11" oninput = "value=value.replace(/[^0-9.]/g,'')" name="tel" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <a th:href="@{/index}" class="layui-btn">返回主界面</a>
            </div>
        </div>

        <div class="layui-bg-gray">
            <p style="font-size: 30px">[[${revokemsg}]]</p>
        </div>
    </form>
</body>
<script type="text/javascript">
    function check(){
        if (${user.isCold} == 1){
            alert("您的账号已冻结！无法进行此操作。");
            return false;
        }
        var tel = document.getElementsByName("tel")[0].value;
        if (tel.length !== 11){
            alert("请输入正确的电话");
            return false;
        }
        if (${user.balance} > 0 ){
            alert("余额不为0，无法注销");
            return false;
        }
        return true;
    }
</script>
<style>
    html body{
        height: 100%;
        width: 100%;
    }
    form {
        margin-top: 40px;
        text-align: center;
    }
</style>
</html>